<template>
	<scroll-view scroll-y class="container" @scroll="onScroll">
		<!-- 引入地不菜单 -->
		<my-bar :current="0"></my-bar>
		<!-- 主页面 -->
		<view class="container_pages">
			<!-- 上面整个大块 -->
			<view class="pages_top">
				<view :class="scrollHeight >= 1 ? 'fixed' : ''">
					<!-- 状态栏 -->
					<view class="status" :style="{ height: statusHeight + 'px' }"></view>
					<!-- 胶囊区域 -->
					<view class="nav" :style="{ height: capsuleHeight + 'px' }">
						<view class="location" @click="skipLocation()">
							<my-location></my-location>
						</view>
						<view class="title" v-if="scrollHeight <= 25">平台名称</view>
						<view class="search" v-else>
							<my-search :messages="list" size="mini"></my-search>
						</view>
					</view>
				</view>
				<!-- 搜索区域 -->
				<view class="search" :style="{ 'margin-top': searchTop > 0 ? searchTop + 'px' : '0' }">
					<my-search :messages="list"></my-search>
				</view>
				<!-- 轮播图区域 -->
				<!-- <view class="banner">
					<swiper
						class="swiper"
						circular
						:indicator-dots="bannerConfig.indicatorDots"
						:autoplay="bannerConfig.autoplay"
						:interval="bannerConfig.interval"
						:duration="bannerConfig.duration"
					>
						<swiper-item>
							<view class="swiper-item">
								<van-image width="100%" height="180" fit="contain" src="https://img.88tph.com/tphc.1/44/0f/RA_xAwuCEemMSQARMiynhQ.jpg" />
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<van-image width="100%" height="180" fit="contain" src="https://images.669pic.com/element_banner/95/11/11/70/318816bbfd39c903513d3009757b19ba.jpg" />
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<van-image width="100%" height="180" fit="contain" src="https://img2.baidu.com/it/u=3911426108,548086053&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=182" />
							</view>
						</swiper-item>
					</swiper>
				</view> -->
				<!-- 菜单区域 -->
				<view class="index_menu">
					<my-menu></my-menu>
				</view>
			</view>
			<!-- 家政知识 -->
			<view class="tips">
				<view class="tips_box">
					<view class="title">
						<view class="title_main">家政</view>
						<view class="title_sub">小知识</view>
					</view>
					<view class="tips_chat">
						<swiper class="swiper" circular :autoplay="true" :interval="swiper.interval" :duration="swiper.duration" vertical>
							<swiper-item class="project-item" v-for="(item, index) in tipsList" :key="item.id">
								<view class="swiper-item">{{ item.title }}</view>
								<view class="item_desc">{{ item.desc }}</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<van-icon name="arrow" />
			</view>
			<!-- 今日关注-->
			<view class="today_attention">
				<my-title title="今日关注">04月24日&nbsp;星期三&nbsp;-14~28℃&nbsp;晴</my-title>
				<view class="attention_box">
					<view class="left"></view>
					<view class="right">
						<view class="top"></view>
						<view class="bottom"></view>
					</view>
				</view>
			</view>
			<!-- 套餐 -->
			<view class="set_meal">
				<my-title title="推荐套餐">
					<van-button type="default" icon="replay" size="mini" plain round>换一批</van-button>
				</my-title>
				<view class="meal_box">
					<van-row gutter="5">
						<van-col :span="8" v-for="item in 3" :key="item">
							<view class="img_box"><image src="" /></view>
							<view class="box_tag">
								<van-tag plain type="success" size="mini">标签</van-tag>
								<van-tag plain type="success" size="mini">标签</van-tag>
							</view>
							<view class="price">
								<text class="new_price">￥398</text>
								<text class="old_price">￥569</text>
							</view>
						</van-col>
					</van-row>
				</view>
			</view>
			<!-- 服务之星 -->
			<view class="service">
				<my-title title="服务之星">
					<text>更多</text>
				</my-title>
				<view class="service_box">
					<van-row gutter="5">
						<van-col :span="8" v-for="item in 3" :key="item">
							<view class="box_message">
								<view class="tip_img"><image src="" /></view>
								<view class="message_card">
									<van-rate value="5" :size="12" color="#ffd21e" void-icon="star" void-color="#eee" />
								</view>
							</view>
						</van-col>
					</van-row>
				</view>
			</view>
			<!-- 用户评价 -->
			<view class="evaluate">
				<my-title title="用户反馈">
					<text>客户的口碑最有说服力</text>
				</my-title>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import { systemInfo, getPageScroll } from '../../utils/mixins';

//状态栏和胶囊区调用混入的
const { statusHeight, capsuleHeight } = systemInfo();
const { scrollHeight, onScroll } = getPageScroll();
// const bannerConfig = reactive({
// 	indicatorDots: true, //是否显示指示点
// 	autoplay: true, //是否自动切换
// 	interval: 3000, //自动切换时间间隔
// 	duration: 500 //滑动动画时长
// }); //是否显示面板指示点
const demo = () => {
	console.log('demo');
};

//搜索框相关
const list = ref(['保洁服务搜索', '清洗服务搜索', '维修服务搜索', '陪诊服务搜索', '保姆服务搜索', '其他服务搜索']);
const searchTop = ref(0); //搜索框一下居上距离

//家政小知识
//滚动消息相关配置
const swiper = reactive({
	interval: 2000, //间隔时间
	duration: 400 //滑动时间
});
const tipsList = ref([
	{ id: 1, title: '怎么能够快速干净的清洗墙纸？', desc: '怎么能够快速干净的清洗墙纸怎么能够快速干净的清洗墙纸怎么能够快速干净的清洗墙纸怎么能够快速干净的清洗墙纸', type: 1 },
	{
		id: 2,
		title: '家具清洁保养知识',
		desc: '擦拭家具的时候应使用棉毛巾、棉纱、软布轻擦拭，不要用大量的水擦洗，更不要用肥皂水或碱水，这样会影响家具表面的光洁度，甚至造成漆面脱落。',
		type: 1
	},
	{
		id: 3,
		title: '日常清洁保养知识',
		desc: '大厅及走廊应随时进行清洁，早上和中午每小时进行一遍地面推尘、倒烟灰、座位整理、扶手与平台抹尘，清除地毯及其它区域中的垃圾，夜上作全面清洁。C',
		type: 1
	},
	{ id: 4, title: '日常饮食烹饪知识？', desc: '至少十几道符合公众口味的家常菜菜。可以简单地煮汤煮粥，掌握一定的营养配餐知识。', type: 1 },
	{ id: 5, title: '日常衣物清洗知识？', desc: '清洗白衣、白袜白色衣物上的顽渍，可以取一个柠檬切片煮水后，把白色衣物放到水中浸泡，大约15分钟后清洗即可。', type: 1 }
]);

//监听滚动变化
watch(
	scrollHeight,
	(val) => {
		if (val > 1) {
			searchTop.value = statusHeight.value + capsuleHeight.value - val;
		} else {
			searchTop.value = 0;
		}
	},
	{
		immediate: true
	}
);
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	padding-bottom: 150rpx;
	.container_pages {
		.pages_top {
			background: url('https://img2.baidu.com/it/u=1847185939,3560973665&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=920') no-repeat;
			.fixed {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 9999;
				background: url('https://img2.baidu.com/it/u=1847185939,3560973665&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=920') no-repeat;
			}
			.nav {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				.location {
					position: absolute;
					left: 30rpx;
				}
				.title {
				}
				.search {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					padding: 0rpx;
					width: 350rpx;
				}
			}
			.search {
				padding: 20rpx;
			}
			.banner {
				padding: 0 30rpx;
				.swiper {
					border: 1px solid #fff;
					border-radius: 10rpx;
					.swiper-item {
						width: 100%;
					}
				}
			}
		}
		.tips {
			display: flex;
			background-color: $uni-bg-color-grey;
			margin: 20rpx;
			padding: 10rpx;
			border-radius: 10rpx;
			align-items: center;
			justify-content: space-between;
			.tips_box {
				display: flex;
				align-items: center;
				.title {
					padding: 0 10px 0 0;
					text-align: center;
					font-size: 28rpx;
					.title_main {
						background: linear-gradient(to right, #9cc8e2, #0994f7);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-weight: bold;
					}
					.title_sub {
						background: linear-gradient(to right, #0994f7, #9cc8e2);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
				.tips_chat {
					width: 500rpx;
					.swiper {
						padding-left: 20rpx;
						border-left: 2px solid #fff;
						height: 70rpx;
						.project-item {
							margin-top: 5rpx;
							.swiper-item {
								font-size: 26rpx;
								background: linear-gradient(to right, blue, red);
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
								font-weight: bold;
							}
							.item_desc {
								font-size: 22rpx;
								white-space: nowrap; /* 防止文本换行 */
								overflow: hidden; /* 隐藏超出容器的内容 */
								text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
							}
						}
					}
				}
			}
		}
		.today_attention {
			padding: 20rpx;
			.attention_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left {
					width: 290rpx;
					height: 310rpx;
					background-color: #ff0000;
					border-radius: 10rpx;
				}
				.right {
					view {
						width: 410rpx;
						height: 150rpx;

						background-color: #ff0000;
						border-radius: 10rpx;
					}
					.bottom {
						margin-top: 10rpx;
					}
				}
			}
		}
		.set_meal {
			padding: 20rpx;
			.meal_box {
				.img_box {
					width: 100%;
					height: 100rpx;
					background-color: #ff0000;
					overflow: hidden;
					border-radius: 10rpx;
					image {
					}
				}
				.box_tag {
				}
				.price {
					.new_price {
						color: #ff0000;
						font-weight: bold;
						font-size: 26rpx;
					}
					.old_price {
						font-size: 20rpx;
						margin-left: 10rpx;
						color: #aaa;
						text-decoration: line-through;
					}
				}
			}
		}
		.service {
			padding: 20rpx;
			.service_box {
				.box_message {
					width: 100%;
					.tip_img {
						width: 50rpx;
						overflow: hidden;
					}
					.message_card {
						background-color: #eee;
					}
				}
			}
		}
		.evaluate {
			padding: 20rpx;
		}
	}
}
</style>
